<template>
  <div class="container fun" v-on-resize="resizeHandle">
    <div class="fun__section">
      <el-button v-height-slide="'.slide-div'" type="primary"
        >自定义按钮颜色</el-button
      >
      <p class="slide-div">
        我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊我是文字啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import vOnResize from '@/directives/onResize'
import vHeightSlide from '@/directives/heightSlide'

function resizeHandle(_size: any) {
  // console.log('.....resize', _size)
}
</script>

<style lang="scss" scoped>
.other-container {
  width: 100%;
  height: 100%;
}
.fun__section {
  margin-top: 20px;
  padding: 0 5%;
}
.slide-div {
  width: 200px;
  height: 0;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
</style>
